// src/components/NoMatchExample.js

// 导入 react 核心类库.
import React from 'react';
// 导入路由核心组件.
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch,
  Redirect,
} from 'react-router-dom';

const NoMatchExample = () => (
  <div>
    <ul>
      <li><Link to="/">首页</Link></li>
      <li><Link to="/old-match">Old Match, 被重定向</Link></li>
      <li><Link to="/will-match">会匹配到</Link></li>
      <li><Link to="/will-not-match">不会被匹配</Link></li>
      <li><Link to="/also/will/not/match">同样不会匹配</Link></li>
    </ul>
    <Switch>
      <Route path="/" exact component={Home} />
      {/* 从 '/old-match' 重定向到 '/will-match' */}
      <Redirect from="/old-match" to="/will-match" />
      <Route path="/will-match" component={WillMatch} />
      <Route component={NoMatch} />
    </Switch>
  </div>
);

const Home = () => (
  <p>
    <code>&lt;Switch></code> 渲染与位置匹配的第一个子标签，<code>&lt;Route></code> 或 <code>&lt;Redirect></code>
  </p>
);

const WillMatch = () => (
  <h3>匹配!</h3>
);

/* 未匹配的提示内容 */
const NoMatch = ({ location }) => (
  <div>
    <h3>没有匹配到 <code>{location.pathname}</code></h3>
  </div>
);

export default NoMatchExample;
